<template>
	<w-container :loading="loading">
		<w-navbar id="my-nav" title="图鉴" bgColor="#9F2825" leftIcon="back-btn-white"
			:titleStyle="{color:'#fff'}"></w-navbar>
		<view class="flex flex-ai-center flex-js-center ptb-7 tips">
			<w-icon name="sign_gift" size="20"></w-icon>
			<view class="font-color-textPrimary font-size-14 ml-10">完成收集图鉴及藏品，可获得平台空投</view>
		</view>
		<view class="warp pt-14">
			<view class="item ptb-12 bg-color-white" v-for="item in codexList" :key="item.id">
				<view class="header plr-16 flex flex-ai-center flex-js-sb">
					<w-icon name="codex_title" size="20"></w-icon>
					<view class="font-color-textPrimary font-size-14 font-w-500 ml-4 flex-1">{{item.name}}</view>
					<view class="count font-color-textPrimary font-size-14 font-w-500"
						v-if="item.dl_count == item.count && item.count>0" style="color: #4CD964;">
						<text>{{item.dl_count}}</text> <text>/{{item.count}}</text>
					</view>
					<view class="count font-color-textPrimary font-size-14 font-w-500 " v-else> <text
							class="font-color-theme">{{item.dl_count}}</text> <text>/{{item.count}}</text> </view>
				</view>
				<view class="control">
					<w-image src="/static/img/un_codex.png" width="56" height="63"
						v-if="!item.is_buy_picture"></w-image>
					<w-image src="/static/img/heightlight_codex.png" width="56" height="63" v-else></w-image>
					<view class="btn" v-if="!item.is_buy_picture" @click="buyCodex(item)">立即购买</view>
					<view :class="`btn  ${item.dl_count == item.count && item.count>0?'light':'buy'}`" v-else
						@click="item.dl_count == item.count && lightCodex(item)">
						{{item.dl_count == item.count && item.count>0?'全部点亮':'已获取图鉴' }}
					</view>
				</view>
				<view class="mt-20 flex flex-dir-col flex-js-center" style="height: 176rpx;">
					<scroll-view class="collection_list" scroll-x="true" v-if="item.info.length">
						<view :class="`collection ${i.status == 1 ? 'height_collection':''}  plr-12 ptb-8 mr-8`"
							v-for="i in item.info" :key="i.id" @click="openCollection(i)">
							<view class="font-color-999 font-size-12 text-overflow mb-5 collection_name">{{i.name}}
							</view>
							<view class="img">
								<image :src="$ossUrl + i.listimg" mode=""></image>
								<view class="num  font-size-12 font-color-white">x{{i.number}}</view>
							</view>
						</view>
					</scroll-view>
					<w-loading type="nomore" loadingText="图鉴暂无藏品~" v-else></w-loading>
				</view>
				<view class="mt-12 text-center font-size-12">{{item.start_time}} -- {{item.end_time}}</view>
			</view>
			<w-loading type="empty" emptyType="search" empty-top="100" v-if="!codexList.length"></w-loading>
		</view>
		<w-modal :show="buyCodexShow" title="购买图鉴" @action="buyCodexAction" submitText="立即支付">
			<view class="flex flex-dir-col flex-ai-center pt-16">
				<w-image src="/static/img/heightlight_codex.png" width="70" height="70" radius="8"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">{{selectCodex.name}}</view>
				<view class="font-color-textPrimary font-size-20 mt-16 font-w-600"> <text class="font-size-14">¥</text>
					{{selectCodex.price}}
				</view>
			</view>
		</w-modal>
		<w-modal :show="heightLightShow" title="已点亮" @action="heightLightAction" submitText="关闭"
			:showCancelButton="false">
			<view class="flex flex-dir-col flex-ai-center pt-16">
				<w-image :src="$ossUrl + selectCollection.listimg" width="70" height="70" radius="8"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">
					{{selectCollection.name}}x{{selectCollection.number}}
				</view>
			</view>
		</w-modal>
		<w-modal :show="unHeightLightShow" title="未点亮" @action="unHeightLightShowAction" submitText="去购买"
			cancelText="关闭">
			<view class="flex flex-dir-col flex-ai-center pt-16">
				<w-image :src="$ossUrl + selectCollection.listimg" width="70" height="70" radius="8"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">
					{{selectCollection.name}}x{{selectCollection.number}}
				</view>
			</view>
		</w-modal>
		<w-modal :show="lighthow" title="成功点亮" :showButton="false" close @change="lighthow = false">
			<view class="seven_pop flex flex-dir-col flex-ai-center pt-16">
				<w-image src="/static/img/heightlight_codex.png" width="70" height="70" class="seven_img"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">{{selectCodex.name}}</view>
			</view>
		</w-modal>
	</w-container>
</template>

<script>
	import {
		pictureList
	} from '@/api/codex/codex.js'
	import {
		createPictuireOrder,
		doPay
	} from '@/api/order/index.js'
	import PayUtil from '@/utils/payUtil.js'
	export default {
		data() {
			return {
				codexList: [],
				loading: true,
				buyCodexShow: false,
				selectCodex: '',
				heightLightShow: false,
				selectCollection: '',
				unHeightLightShow: false,
				lighthow: false
			}
		},
		methods: {
			async getList() {
				const res = await pictureList()
				this.codexList = res.data
				this.loading = false
			},
			buyCodex(item) {
				this.selectCodex = item
				this.buyCodexShow = true
			},
			lightCodex(item) {
				this.selectCodex = item
				this.lighthow = true
			},
			buyCodexAction(e) {
				if (e) {
					this.createOrder()
				} else {
					this.buyCodexShow = false
				}
			},
			createOrder() {
				createPictuireOrder({
					id: this.selectCodex.id,
				}).then(res => {
					this.pay({
						pay_type: 4,
						order_type: 20,
						pay_way: 'huifu',
						order_number: res.data.order_sn,
						order_id: res.data.order_id
					})
				})
			},
			pay({
				pay_type,
				order_type,
				order_number,
				order_id,
				pay_way
			}) {
				// return
				new PayUtil({
					pay_type,
					order_number,
					order_type,
					pay_way,
					order_id
				});
			},
			openCollection(e) {
				this.selectCollection = e
				if (e.status == 1) {
					this.heightLightShow = true
				} else {
					this.unHeightLightShow = true
				}

			},
			heightLightAction(e) {
				this.heightLightShow = false
			},
			unHeightLightShowAction(e) {
				if (e) {
					uni.switchTab({
						url: '/pages/market/market'
					})
				}
				this.unHeightLightShow = false
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.tips {
		background: rgba(255, 172, 48, 0.23);
	}

	.item {
		margin-top: 160rpx;
		position: relative;

		.control {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 50%;
			top: -72rpx;
			transform: translateX(-50%);

			.btn {
				padding: 8rpx 20rpx;
				border-radius: 60rpx;
				transform: translateY(-28rpx);
				@extend .font-size-14, .font-color-white, .bg-color-theme;
			}

			.buy {
				background: #999999;
			}

			.light {
				background: linear-gradient(128deg, #FF4E4E 0%, #FEAB22 100%);
			}
		}

		.collection_list {
			width: 100%;
			white-space: nowrap;

			.collection {
				display: inline-block;
				width: 152rpx;
				height: 176rpx;
				background: #E4E4E4;
				border-radius: 12rpx;
				border: 2rpx solid transparent;
				box-sizing: border-box;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					position: relative;
					overflow: hidden;
					opacity: 0.5;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.num {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 28rpx;
						text-align: center;
						background: rgba(0, 0, 0, 0.5);
						line-height: 28rpx;
					}
				}

				&:first-child {
					margin-left: 16rpx;
				}
			}

			.height_collection {
				background: #FFF7F7;
				border-color: #9F2825;

				.collection_name {
					color: #222;
				}

				.img {
					opacity: 1;
				}
			}
		}
	}
</style>